From: Volker E <volker.e@wikimedia.org>
Date: Sat, 9 Sep 2017 05:47:22 +0000 (-0700)
Subject: postEdit: Use standard close icon
X-Git-Tag: 1.31.0-rc.0~2134^2
X-Git-Url: https://git.cyclocoop.org/admin/%7B%24plugin.url%7Cescape%7D?a=commitdiff_plain;h=8b8e1df5476b4a8d6ad11caf612c0bfdb0d0358e;p=lhc%2Fweb%2Fwiklou.git

postEdit: Use standard close icon

Making use of standard close icon and also prevent screenreaders
from reading 'x' if they ever come across the message.
Also slightly bumping `font-size` to better harmonize
with close icon and clean-up CSS.

Bug: T50067
Change-Id: I82cdad23462f62d5e8ab2eef8632a2b3ac35e93f
---

diff --git a/resources/src/mediawiki.action/images/close.png b/resources/src/mediawiki.action/images/close.png
new file mode 100644
index 0000000000..80dde95155
Binary files /dev/null and b/resources/src/mediawiki.action/images/close.png differ
diff --git a/resources/src/mediawiki.action/images/close.svg b/resources/src/mediawiki.action/images/close.svg
new file mode 100644
index 0000000000..7f7551128e
--- /dev/null
+++ b/resources/src/mediawiki.action/images/close.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<path d="M3.636 2.222l14.142 14.142-1.414 1.414L2.222 3.636z"/>
+	<path d="M17.778 3.636L3.636 17.778l-1.414-1.414L16.364 2.222z"/>
+</svg>
diff --git a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
index e1fa925823..d19f098529 100644
--- a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
+++ b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
@@ -7,7 +7,7 @@
 	height: 0;
 	left: 50%;
 	z-index: 1000;
-	font-size: 13px;
+	font-size: 14px;
 	cursor: pointer;
 }
 
@@ -19,6 +19,24 @@
 	opacity: 1;
 	.transition( opacity 250ms );
 
+	&:after {
+		content: '';
+		background: no-repeat center center;
+		.background-image-svg( 'images/close.svg', 'images/close.png' );
+		background-size: 12px 12px;
+		position: absolute;
+		right: 0.4em;
+		top: 0;
+		bottom: 0;
+		min-width: 32px;
+		min-height: 32px;
+		opacity: 0.87;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+
 	&.mw-notification {
 		padding-right: 3em;
 	}
@@ -29,32 +47,13 @@
 }
 
 .postedit-icon {
-	padding-left: 41px; /* 25 + 8 + 8 */
+	padding-left: 25px;
 	/* like min-height, but old IE compatible and keeps text vertically aligned, too */
 	line-height: 25px;
 	background-repeat: no-repeat;
-	background-position: 8px 50%;
 }
 
 .postedit-icon-checkmark {
 	/* @embed */
 	background-image: url( images/green-checkmark.png );
-	background-position: left;
-}
-
-.postedit:after {
-	content: '×';
-	position: absolute;
-	padding: 0 0.8em;
-	right: 0;
-	top: 0;
-	font-size: 1.25em;
-	font-weight: bold;
-	line-height: 2.3em;
-	text-shadow: 0 0.0625em 0 #fff;
-	opacity: 0.2;
-}
-
-.postedit:hover:after {
-	opacity: 0.4;
 }